<template>
     <CustomNavbar></CustomNavbar>
     <scroll-view @scrolltolower="onScrolltolower" refresher-enabled :refresher-triggered="false" @refresherrefresh="onRefresherrefresh" class="scroll-view" scroll-y>
      <HomeSkeletions v-if="isLoading"></HomeSkeletions> 
      <template v-else>
            <!-- 轮播图 -->
            <XtxSwiper :list="bannerList"></XtxSwiper>
            <!-- 分类面板 -->
            <CategoryPanel :list="categoryMutliList"></CategoryPanel>
            <!-- 热门推荐 -->
            <CustomHotPanel :list="hotList"></CustomHotPanel>
            <!-- 猜你喜欢 -->
            <XtxGuess ref="guessRef"></XtxGuess>
       </template>
     </scroll-view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { getHomeBannerAPI,getHomeCategoryMutliAPI,getHomeHotMutliAPI } from '../../services/home';
import { ref } from 'vue';
import type { BannerItem,CategoryMutliItem,HotItem } from  "@/types/home";

import CustomNavbar from  './components/CustomNavbar.vue'
import CategoryPanel from './components/CategoryPanel.vue';
import CustomHotPanel from './components/CustomHotPanel.vue';
import HomeSkeletions from './components/HomeSkeletions.vue';
import type { XtxGussInstance } from '@/types/component';

const bannerList = ref<BannerItem[]>([]);
const categoryMutliList = ref<CategoryMutliItem[]>([]); 
const hotList = ref<HotItem[]>([]);
const guessRef = ref<XtxGussInstance>()
const isTriggered = ref(false)
const isLoading = ref(true)

onLoad(async () => {
  isLoading.value = true
  // 重置数据
  await Promise.all([
    getBannerData(),
    getHomeCategoryMutli(),
    getHomeHotMutli()
  ])
  isLoading.value = false
})

/// banner请求
const getBannerData = async () => {
  const res = await getHomeBannerAPI() 
  bannerList.value = res.result
}

/// 获取menu数据
const getHomeCategoryMutli = async () => {
  const res = await getHomeCategoryMutliAPI() 
  categoryMutliList.value = res.result
}

/// 获取热门函数
const getHomeHotMutli = async () => {
  const res = await getHomeHotMutliAPI() 
  hotList.value = res.result
}

/// 上拉到底加载
const onScrolltolower = () => {
  guessRef.value?.getMore()
}
/// 下拉刷新
const onRefresherrefresh = async () => {
  isTriggered.value = true
  // 重置数据
  guessRef.value?.resetData()
  await Promise.all([
    getBannerData(),
    getHomeCategoryMutli(),
    getHomeHotMutli()
  ])
  isTriggered.value = false
  
}
  
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
    flex: 1;
  }
</style>
